import React from 'react'
import { Table, Button, Icon, Input, Form, Tree, Modal, Collapse, message } from 'antd'
const FormItem = Form.Item
const TreeNode = Tree.TreeNode
const Panel = Collapse.Panel;

class Details extends React.Component{
	constructor(props){
		super(props)
		this.state={
			name:'',
		}
	}
	returnBack=()=>{
		const { hideDetails } = this.props  
		hideDetails()
	}
	inputBlur=e=>{
		this.setState({name:e.target.value})
	}
	onCheck = (i,checkedKeys,e) => {
		const {onTreeCheck,treeCheckedKeys} = this.props
		const value = treeCheckedKeys
		value[i] = checkedKeys
    		onTreeCheck(value)
  	}
	handleOk = () => {
		const { onOk,treeCheckedKeys,jurisdictionList,item } = this.props
		const { validateFields, getFieldsValue } = this.props.form
	    validateFields((errors) => {
	      if (errors) {
	        return
	      }
	      const data = {
	        ...getFieldsValue(),
	      }
	      data.menuIdList = treeCheckedKeys
	      if (data.remark == undefined) {
	        data.remark = ''
	      }
	      var datas = []
	      var arr = []
			for (var i in data) {
			    arr.push(data[i]); //属性
			}
	      if(jurisdictionList && jurisdictionList.length > 0){
	      	for(let i=0;i<jurisdictionList.length;i++){
	      		datas[i] = {key:arr[i],value:data.menuIdList[i]?data.menuIdList[i]:""}
	      	}
	      }
//	      if(this.state.name == ''){
//	      	message.error('请输入角色名');
//	      	return
//	      }
	      const params = {}
	      datas.map((item,i)=>{
	      	if(item.value != "" && item.value.menuIdList == undefined){
	      		item.value = item.value.join(",")
	      	}else if(item.value.menuIdList){
	      		item.value = item.value.menuIdList.join(",")
	      	}
	      })
	      params.menuJosn = JSON.stringify(datas)
	      params.roleName = this.state.name ==""?item.roleName:this.state.name
	      params.remark = data.remark
	      if(item.roleId){
	      	params.id = item.roleId
	      }
	      onOk(params)
	    })
	  }
	componentDidMount(){
		
	}
	render(){
	  const { treeCheckedKeys,treeData,jurisdictionList,modalType,item } = this.props
	  if(!jurisdictionList){
	  	return null
	  }
	  const { getFieldDecorator, getFieldsValue } = this.props.form
	  const formItemLayout = {
	  	labelCol: {
	    		span: 3,
	  	},
	  	wrapperCol: {
	    		span: 7,
	  	},
	  }
	  const loop = data => data.map((item) => {
	    if (item.children) {
	      return (
	        <TreeNode key={item.menuId} title={item.name} >
	          {loop(item.children)}
	        </TreeNode>
	      )
	    }
	    return <TreeNode key={item.menuId} title={item.name} />
	  })		
	  const organizationList = []
//	  const valueData = []
	  const valueData = new Array(jurisdictionList.length)

//	  const valueData = new arry(jurisdictionList.length)
	  jurisdictionList.map((item,i)=>{
	  	treeCheckedKeys.map((item1,j)=>{
	  		if(item.id == item1.organizationId){
	  			valueData[i] = item1.menuIdList
	  		}
	  	})
	  })
	  if(modalType == 'update'){
	  	for(var z=0;z<valueData.length;z++){
		  	if(valueData[z] == undefined){
		  		valueData[z] = treeCheckedKeys[z]
		  	}		
		}
	  }
	  
	  jurisdictionList.map((item,i)=>{
	  	
//	  		treeCheckedKeys.map((item1,j)=>{
		  		organizationList.push(
		  		<Panel showArrow={false} header={
						<div style={{lineHeight:"60px",display:"flex",justifyContent:"space-between",padding:"0 10px",background:"#f7f7f7"}}>
							<div>
								<Icon type="home" />
								<span>{item.parentId == 0?"本机构":"子机构"}：{item.name}</span>
							</div>
							<div>
								<Button type="primary"
									style={{marginRight: 10}}>
									查看
								</Button>
							</div>	
						</div>
					} key={i}>
				      <Form layout="horizontal" style={{width:"60%"}}>
				        <FormItem style={{display:"none"}} label="" hasFeedback {...formItemLayout}>
				          {getFieldDecorator(`key${i}`, {
				          	initialValue:item.id
				          })(
					         <Input/>
				          )}
				        </FormItem>
				        <Tree
//					          checkedKeys={treeCheckedKeys[i].menuIdList?treeCheckedKeys[i].menuIdList:treeCheckedKeys[i]}
//							  checkedKeys={item.id == item1.organizationId?item1.menuIdList:treeCheckedKeys[i]}
							  checkedKeys={modalType=="update"?valueData[i]:treeCheckedKeys[i]}
					          onCheck={this.onCheck.bind(null,i)}
					          defaultExpandAll
					          checkable
					        >
					          {loop(treeData?treeData:[])}
					        </Tree>
				      </Form>	
				    </Panel>  
		  		)
//		  })		
	  })
		return(
			<div>
				<div style={{display:'flex'}}>
					<Button style={{padding:"10px 20px",height:30,marginRight:40}} onClick={this.returnBack}>
			        		<Icon type="left-circle" />返回
			      	</Button>
			      	<Input style={{width:220,height:30,marginRight:30}} placeholder="请输入角色名称" defaultValue={item.roleName?item.roleName:''} onBlur={this.inputBlur}/>
			      	<Button type="primary" style={{padding:"10px 20px",height:30}} onClick={this.handleOk}>
			      		保存
			      	</Button>
				</div>
				<h3 style={{fontWeight:600,marginBottom:10}}>请对机构分别进行权限设置</h3>
				
				<Collapse style={{width:"60%"}}>  
 					{organizationList}
			    </Collapse>
			</div>
			
			
		)
	}
}

export default Form.create()(Details)